<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            min-height: 200px;
            border: 2px dashed #ccc;
            padding: 20px;
            margin: 20px;
            transition: all 0.3s;
        }

        .draggable-item {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
            cursor: move;
            transition: transform 0.2s, opacity 0.2s;
        }

        .drop-zone {
            background-color: #f0f0f0;
        }

        .drop-zone.drag-over {
            border-color: #4CAF50;
            background-color: #e8f5e9;
            transform: scale(1.02);
        }

        .new-item {
            animation: fadeIn 0.5s, scaleUp 0.5s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes scaleUp {
            from { transform: scale(0.5); }
            to { transform: scale(1); }
        }
    </style>
</head>
<body>
    <!-- 拖拽元素 -->
    <div class="draggable-item" draggable="true">
        拖拽我
    </div>

    <!-- 放置区域 -->
    <div class="container drop-zone" id="dropZone">
        拖放到这里
    </div>

    <script>
        const draggable = document.querySelector('.draggable-item');
        const dropZone = document.getElementById('dropZone');

        // 拖拽开始事件
        draggable.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', 'dragged-item');
            e.target.style.opacity = '0.5';
            e.target.style.transform = 'scale(0.9)';
        });

        // 拖拽结束事件
        draggable.addEventListener('dragend', (e) => {
            e.target.style.opacity = '1';
            e.target.style.transform = 'scale(1)';
        });

        // 拖拽进入放置区域
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('drag-over');
        });

        // 拖拽离开放置区域
        dropZone.addEventListener('dragleave', (e) => {
            dropZone.classList.remove('drag-over');
        });

        // 放置事件
        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('drag-over');
            
            // 创建新元素
            const newItem = document.createElement('div');
            newItem.textContent = '新项目';
            newItem.className = 'draggable-item new-item';
            newItem.draggable = true;
            
            // 添加动画结束后移除动画类
            newItem.addEventListener('animationend', () => {
                newItem.classList.remove('new-item');
            });

            // 添加拖拽功能到新元素
            newItem.addEventListener('dragstart', handleDragStart);
            newItem.addEventListener('dragend', handleDragEnd);

            dropZone.appendChild(newItem);
        });

        // 通用拖拽处理函数
        function handleDragStart(e) {
            e.dataTransfer.setData('text/plain', 'dragged-item');
            e.target.style.opacity = '0.5';
            e.target.style.transform = 'scale(0.9)';
        }

        function handleDragEnd(e) {
            e.target.style.opacity = '1';
            e.target.style.transform = 'scale(1)';
        }
    </script>
</body>
</html>